import { defaultElementTypeProvider, hiprint } from "@sv-print/hiprint";
import pluginEcharts from "@sv-print/plugin-ele-echarts";
import pluginScale from "@sv-print/plugin-scale";
import $ from 'jquery';
import { useEffect, useRef } from 'react';
import './Print3.css';
import panel from "./panel";

function Provider() {
  var addElementTypes = function (context) {
    console.log(context);

    // 移除 旧的 defaultModule "元素"类型, 以避免重复
    context.removePrintElementTypes("defaultModule");
    // 添加 defaultModule "元素"类型
    context.addPrintElementTypes("defaultModule", [
      // PrintElementTypeGroup 分组
      // 如果使用 hiprint.PrintElementTypeManager.build('.hiprintEpContainer2', "defaultModule") 这里会渲染这个 "常规" 分组名称
      new hiprint.PrintElementTypeGroup("常规", [
        {
          tid: "defaultModule.text", // 唯一 key
          type: "text", // 元素类型
          title: "文本1", // 这里和 options 中的 title 一样。"拖拽时就显示" 优先级高于 options 的, "无法彻底删除"
          // field: 'text' // 这里和 options 中的 field 一样。优先级高于 options 的, "无法彻底删除"
          // data: "1111", // 这里和 options 中的 testData 一样。会有冲突, "无法彻底删除"
          options: {
            title: "文本2", // 标题, "拖进设计器才会显示"
            field: "text2", // 字段名称
            testData: "123", // 测试数据
          },
        },
        // 添加图片元素类型定义
        {
          tid: "defaultModule.image", // 唯一 key
          type: "image", // 元素类型
          title: "图片", // 拖拽时显示的标题
          options: {
            field: "imageUrl", // 绑定的数据字段名
            testData: "https://via.placeholder.com/150", // 测试图片 URL
            width: 150, // 默认宽度
            height: 150, // 默认高度
            // fit: 'contain' // 图片适应方式，可选值: 'contain', 'cover', 'fill', 'none', 'scale-down'
          }
        },
        // 添加表格元素类型定义
        {
          tid: 'defaultModule.table', // 唯一 key
          type: 'table', // 元素类型
          title: '表格', // 拖拽时显示的标题
          field: 'tableData', // 绑定的数据字段名 (应为数组)
          // 定义表格列
          columns: [
            // 列1: 标题为 "列 A", 绑定数据对象的 'colA' 字段
            [{ title: '列 A', field: 'colA', width: 100 }, { title: '列 B', field: 'colB', width: 100 }],
            // 列2: 标题为 "列 B", 绑定数据对象的 'colB' 字段
            [],
            // 可以添加更多列...
          ],
          // 测试数据 (一个对象数组)
          data: [
            { colA: '行1-A', colB: '行1-B' },
            { colA: '行2-A', colB: '行2-B' },
          ]
        },
        // 添加 echarts 图表元素类型
        {
          tid: "defaultModule.echarts",
          type: "echarts", // 自定义类型
          title: "图表",
          options: {
            field: "chartData",
            width: 300,
            height: 200,
            // echarts 配置选项
            chartOptions: {
              title: {
                text: '示例图表'
              },
              tooltip: {},
              xAxis: {
                data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
              },
              yAxis: {},
              series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
              }]
            }
          }
        },
      ]),
      new hiprint.PrintElementTypeGroup("辅助", [
        {
          tid: "defaultModule.hline",
          title: "横线",
          type: "hline",
        },
      ]),
    ]);
  };

  return {
    addElementTypes,
  }
}


const Print = () => {
  const hiprintTemplate = useRef(null);
  // 渲染部分都是填充到 对应 "容器" 中， 所以肯定需要能够获取到对应 DOM 后 操作。
  useEffect(() => {
    init();
  }, [])
  function init() {
    // 1. 创建 provider 实例
    // const provider = new defaultElementTypeProvider();
    // 初始化 provider , 才能让 "可拖拽元素" 可正常拖拽 【因为要先去处理 provider 中的 "tid"】
    hiprint.init({
      providers: [new defaultElementTypeProvider()],
    });

    hiprint.register({
      plugins: [pluginScale({ name: "缩放(自定义)" }), pluginEcharts()],
    });
    console.log(hiprint.PrintElementTypeManager);

    hiprint.setConfig({
      showSizeBox: true,
    });

    // 渲染 "可拖拽元素" 方式1, 包含 "tid" 元素 class 必须包含 "ep-draggable-item"
    hiprint.PrintElementTypeManager.buildByHtml($('.ep-draggable-item'));
    // 渲染 "可拖拽元素" 方式2, 指定 "可拖拽元素" 容器
    // $(".hiprintEpContainer2").empty(); // // 有时可能是第二次进入此页面, 所以需要先清空 "可拖拽元素" 容器
    document.querySelector(".hiprintEpContainer2").innerHTML = ''
    // hiprintEpContainer2 => "可拖拽元素" 容器
    // defaultModule => provider 对应的 ElementTypes --> context.addPrintElementTypes("defaultModule",[])
    // 有时如果你发现你页面出现重复的 "可拖拽元素" 元素, 那么你需要 先移除"旧"的 ElementTypes --> context.removePrintElementTypes("defaultModule");
    hiprint.PrintElementTypeManager.build(".hiprintEpContainer2", "defaultModule");
    // 有时可能是第二次进入此页面, 所以需要先清空 "拖拽设计器" 容器
    // $("#hiprint-printTemplate").empty();
    document.querySelector("#hiprint-printTemplate").innerHTML = ''
    // 创建模板对象
    hiprintTemplate.current = new hiprint.PrintTemplate({
      // "初始模板 json"
      template: panel,
      // "元素参数设置" 容器
      settingContainer: "#PrintElementOptionSetting",
      // "多面板" 容器
      // 实现多面板， 需要在页面添加一个 <div class="hiprint-printPagination"/>
      // 不添加, 可不用下方代码, 如果没有对应 容器 写了也没用
      // paginationContainer: ".hiprint-printPagination",
      // onDataChanged: (type, json) => {
      // console.log(type, json);
      // }
    })
    // 将模板渲染到 "拖拽设计器" 容器 中
    hiprintTemplate.current.design("#hiprint-printTemplate", { grid: true });
    // 如果你只想打印, 那么 创建模板 对象 参数只需要 "初始模板 json" 然后调用 print/print2 即可
    // let printData = { text: "这是打印时显示的文本" };
    // hiprintTemplate.current.print(printData)

    console.log(hiprint.ElementTypes);

  }

  function handleLock() {
    console.log('hiprintTemplate.current', hiprintTemplate.current);
    console.log(hiprintTemplate.current.getJson());
    // console.log(hiprintTemplate.current.getSelectEls());
    hiprintTemplate.current.updateOption('draggable', false)
    console.log(hiprintTemplate.current.getJson());
    hiprintTemplate.current.update(hiprintTemplate.current.getJson())
  }
  function handleUnlock() {
    hiprintTemplate.current.updateOption('draggable', true)
    hiprintTemplate.current.update(hiprintTemplate.current.getJson())
  }
  function handlePrint() {
    // 打印
    hiprintTemplate.current.print();
  }

  return (
    <div className="wrapper" style={{ display: 'flex' }}>
      <div style={{ width: '300px' }}>
        <button onClick={handlePrint}>打印</button>
        <div>
          <p>按钮</p>
          <button onClick={handleLock}>锁定</button>
          <button onClick={handleUnlock}>解锁</button>
        </div>
        <div title="这是方式1,完全自定义元素样式" className="hiprintEpContainer">
          {/* <!-- 必须包含 "ep-draggable-item" class --> */}
          {/* <!-- defaultModule.text ==> provider 中 对应的 tid --> */}
          <a className="ep-draggable-item" tid="defaultModule.text">
            <p>文本</p>
          </a>
          {/* 添加自定义图表拖拽项 */}
          <a className="ep-draggable-item" tid="defaultModule.echarts">
            <p>图表</p>
          </a>
        </div>
        {/* <!-- "可拖拽元素" 容器 --> */}
        <div title="这是方式2,仅显示自定义元素的标题" className="hiprintEpContainer2"></div>
      </div>

      <div style={{ marginTop: '100px' }}>
        {/* <!-- 这是 "多面板" 容器 点击切换面板 --> */}
        {/* <div className="hiprint-printPagination"></div> */}
        {/* <!-- 这是 "拖拽设计器" 容器 --> */}
        <div id="hiprint-printTemplate"></div>
      </div>
      {/* <!-- 这是 "元素参数设置" 容器 --> */}
      <div id="PrintElementOptionSetting" style={{ width: '300px' }}></div>
    </div >
  )
}
export default Print;
